<template>
	<div style="height: 80vh">
		<div style="display: flex; justify-content: space-around">
			<p>班级管理</p>
			<p>当前状态:<span style="color: red;">{{ data.stateName[data.state] }}</span></p>
			<p><button @click="go2Add()">添加新班级</button></p>
		</div>

		<div style="display: flex">
			<div style="width: 68%">
				<table border="1" style="width: 95%">
					<tr style="background-color: gainsboro">
						<th>班级编号</th>
						<th>班级名称</th>
						<th>修改操作</th>
						<th>删除操作</th>
					</tr>
					<tr v-for="clz in data.clzs">
						<td>{{ clz.clzno }}</td>
						<td>{{ clz.clzname }}</td>
						<td><button @click="go2Update(clz)">修改</button></td>
						<td><button @click="del(clz.clzno)">删除</button></td>
					</tr>
				</table>
			</div>
			<div style="width: 30%">
				<br />
				<br />
				班级编号:&nbsp;<input type="text" style="width: 60%;" v-model="data.clz.clzno" v-bind:readonly="data.state != 1" />
				<hr />
				班级名称:&nbsp;<input type="text" style="width: 60%;" v-model="data.clz.clzname" />
				<hr>
				<button style="width: 100%;" @click="doUpdate()" v-show="data.state == 0">修改</button>
				<button style="width: 100%;" @click="doAdd()" v-show="data.state == 1">添加</button>
				
			</div>
		</div>
	</div>
</template>

<script setup>
	import { onMounted, reactive } from 'vue';
	import { $postf,$get } from '@/ajax';
	import store from '@/store';
	
	const data = reactive({
		clzs: [],
		clz: {},
		stateName: ['修改...', '添加...', '显示...'],
		state: 2
	})
	
	const del = (clzno) =>{
		console.dir('删除的编号 : ' + clzno);
		$get(`/api/adm/clz/del?clzno=` + clzno)
		.then((resp) => {
			console.log("删除响应结束");
			data.clzs = resp.data.data;
		});
	}
	
	const go2Update = (obj) =>{
		console.dir(obj);
		data.clz = obj;
		data.state = 0;
	}
	
	const doUpdate = () =>{
		console.dir(data.clz);
		let clz = new FormData();
		clz.append('clzno', data.clz.clzno);
		clz.append('clzname', data.clz.clzname);
		
		$postf(`/api/adm/clz/update`, clz)
		.then((resp) => {
			data.clzs = resp.data.data;
		});
	}
	
	const go2Add = () =>{
		data.state = 1;
		data.clz = {};
	}
	
	const doAdd = () =>{
		let clz = new FormData();
		clz.append('clzno', data.clz.clzno);
		clz.append('clzname', data.clz.clzname);

		$postf(`/api/adm/clz/add`, clz).then(function (resp) {
			if(resp.data.code == 200){
				store.state.msg = '添加成功'
			}
			data.clzs = resp.data.data;
		});
	}
	
	onMounted(()=>{
		$get(`/api/adm/clz/findAll`).then(function (resp) {
			console.log("初始化数据")
			data.clzs = resp.data.data;
		});
	})
</script>

<style>
	#ta input{
		width:80%;
	}
</style>
